<template>
	<view>
		<view class="list-view">
			<view class="list-item" v-for="(hospitalItem, index) in list">
				<view class="select-button" style="margin-right: 10rpx;" @click="onRadioChange(index)">
					<image src="../../static/tab_select_have.png" v-if="selectItemIndex === index"></image>
					<image src="../../static/tab_select_not.png" v-else></image>
				</view>
				<view class="right-view">
					<view class="title-view">
						<image src="../../static/hospital_icon.png" class="logo"></image>
						<view class="title">{{ hospitalItem.hospitalName }}</view>
						<view class="distance">{{ hospitalItem.contain }}</view>
					</view>
					<view class="item-view" v-for="item in hospitalItem.serverItems">
						<view class="item-left">
							<image :src="item.picImg" class="img"></image>

						</view>
						<view class="right">
							<view class="row-text">
								<view class="name">{{ item.proName }}</view>
								<!-- <cn-money :money="Number.parseFloat(item.actualPrice)" :size="48"></cn-money> -->
							</view>
							<view class="cost-list">
								<!--
								<view class="row">
									<view class="left">上门服务费：</view>
									<view class="right">
										<cn-money :money="item.onsiteServiceFee | numFilter" :size="48"></cn-money>
									</view>
								</view>
								<view class="row">
									<view class="left">医疗服务费：</view>
									<view class="right">
										<cn-money :money="item.medicalServiceFee | numFilter" :size="48"></cn-money>
									</view>
								</view>
								<view class="row">
									<view class="left">保险费：</view>
									<view class="right">
										<cn-money :money="item.insuranceServiceFee | numFilter" :size="48"></cn-money>
									</view>
								</view>
								-->
								<view class="row">
									<view class="left">费用：</view>
									<view class="right">
										<cn-money :money="item.totalServiceFee | numFilter" :size="48"></cn-money>
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
			<uni-load-more :status="status"></uni-load-more>
		</view>

		<view class="bottom-fixed-view">
			<view class="left">
				<view>总计：</view>
				<cn-money :money="totalMoney" :size="48"></cn-money>
				<view class="distance">{{ selectItem.contain ? `(${selectItem.contain})` : '' }}</view>
			</view>
			<view class="right-btn" @click="handleSubmit">
				确认
			</view>
		</view>

	</view>
</template>

<script>
	import PageInfo from '../../utils/pageutils'
	import * as hospitalInfo from '../../common/api/hospitalInfo.js'
	import cnMoney from '../../components/cn-money/cn-money'
	export default {
		components: {
			cnMoney
		},
		data() {
			return {
				itemServerIds: [],
				pageInfo: new PageInfo(),
				list: [],
				status: 'more',
				selectItem: null,
				selectItemIndex: null,
				patientUid: ''
			}
		},
		onLoad(opt) {
			this.patientUid = opt.patientUid
			if (opt.itemServerIds) {
				this.itemServerIds = JSON.parse(decodeURIComponent(opt.itemServerIds))
			}
			this.refresh()
		},
		onPullDownRefresh() {
			this.refresh()
		},
		onReachBottom() {
			this.loadMore()
		},
		computed: {
			totalMoney() {
				const selectItem = this.selectItem || {}
				let sum = 0
				const serverItems = selectItem.serverItems || []
				serverItems.forEach(e => {
					sum += Number.parseFloat(e.totalServiceFee)
				})
				return sum
			}
		},
		filters: {
			numFilter(val) {
				if (!val) {
					return 0
				}
				return parseFloat(val)
			}
		},
		methods: {
			refresh() {
				this.pageInfo.reset()
				this.list = []
				this.status = 'loading'
				this.getList()
			},
			loadMore() {
				if (this.pageInfo.isNotLoadAll) {
					this.status = 'loading'
					this.pageInfo.nextPage()
					this.getList()
				} else {
					this.status = 'noMore'
				}
			},
			getList() {
				const param = {
					pageIndex: this.pageInfo.pageIndex,
					pageSize: this.pageInfo.pageSize,
					itemServerIds: this.itemServerIds
				}
				hospitalInfo.getHospitals(param).then(result => {
					const list = result.data.data.rows || []
					const total = result.data.data.total
					this.list = [...this.list, ...list]
					this.pageInfo.total = total
					this.pageInfo.loadedTotal = this.list.length
					setTimeout(() => {
						if (this.pageInfo.isNotLoadAll) {
							this.status = 'more'
						} else {
							this.status = 'noMore'
						}
						uni.stopPullDownRefresh()
					}, 200)
				}).catch(error => {
					console.log(error);
				})
			},
			onRadioChange(e) {
				this.selectItem = this.list[e]
				this.selectItemIndex = e
			},
			checkboxChange(e, item) {
				if (e[0]) {
					item.originActualPrice = item.actualPrice;
					item.actualPrice = item.actualPrice - item.materialFee;
					this.selectItem.selfProvideMaterial = '是';
					// this.$set(item,'_actualPrice',item.actualPrice - item.materialFee)
					// this.$set(item,'_selfProvideMaterial','是')
				} else {
					// 	this.$set(item,'_actualPrice',item.actualPrice)
					item.actualPrice = item.originActualPrice;
				}
			},
			getTotalPrice(item) {

				// if(item._actualPrice){
				// 	this.$set(item,'_actualPrice',item._actualPrice)
				// }else{
				// 	this.$set(item,'_actualPrice',item.actualPrice)
				// }
				return item.actualPrice
			},
			handleSubmit() {
				console.log("opt",this.selectItem);
				if (!this.selectItem) {
					uni.showToast({
						title: '请选择医院',
						icon: 'none'
					})
					return
				}
					hospitalInfo.queryHospitalDistance({
						openId: uni.getStorageSync('openid_key'),
						hospitalUid: this.selectItem.hospitalUid,
						uid: this.selectItem.serverItems[0].medicalProjectsUid,
					}).then(res => {
						console.log('res', res.data.code);
						if (res.data.code == 200) {
							this.$store.commit("page/setPageInfo", {
								chooseHospital: true,
								rule: res.data.data,
								chooseHospitalInfo: this.selectItem
							});
							uni.navigateBack()
						} else {
							uni.showModal({
								title: '警告',
								content: res.data.msg,
								showCancel: false, // 显示取消按钮
							});
						}
					})

				
		

			}
			
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.list-view {
		width: 100%;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		padding-bottom: 150rpx;

		.list-item {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			background: white;
			border-radius: 16rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;

			radio {
				transform: scale(0.7);
			}

			.right-view {
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-left: 30rpx;

				.title-view {
					width: 100%;
					display: flex;
					align-items: center;

					.logo {
						width: 28rpx;
						height: 28rpx;
					}

					.title {
						flex: 1;
						margin-left: 20rpx;
						color: #232323;
						font-size: 32rpx;
						font-weight: bold;
					}

					.distance {
						color: rgba(35, 35, 35, 0.8);
						font-size: 24rpx;
					}
				}

				.item-view {
					width: 100%;
					display: flex;
					align-items: center;
					margin-top: 24rpx;

					.item-left {
						.bottom-checkbox {
							margin-top: 50rpx;
						}
					}

					.img {
						width: 136rpx;
						height: 136rpx;
						border-radius: 20rpx;
					}

					.name {
						flex: 1;
						font-size: 32rpx;
						color: #232323;
					}

					.right {
						flex: 1;
						margin-left: 20rpx;

						.row-text {
							display: flex;
							align-items: center;
						}
					}

				}


			}
		}
	}

	.bottom-fixed-view {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 116rpx;
		background: white;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.distance {
			color: rgba(35, 35, 35, 0.8);
			font-size: 24rpx;
			margin-left: 15rpx;
		}

		.right-btn {
			width: 226rpx;
			height: 88rpx;
			border-radius: 48rpx;
			background: #0BC5AE;
			color: white;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.select-button {
		width: 40rpx;
		height: 40rpx;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.cost-list {
		.row {
			display: flex;
			align-items: center;

			.left {
				min-width: 170rpx;
			}
		}
	}
</style>